<template>
    <div class="data_number_input_contianer">
        <el-input-number v-model="value" :min="min" :max="max" :precision="precision" 
            :controls="false" :disabled="disabled" :readonly="readonly" :placeholder="placeholder"
            class="data_number_input"
            @input="handleChange" />
        <span class="number_input_icon">
            <slot name="icon">%</slot>
        </span>
    </div>
</template>
<script setup>
    import { ref } from "vue"
    const props = defineProps( [ 'modelValue', 'min', 'max', 'precision', 'disabled', 'readonly', 'placeholder' ] );
    const emit = defineEmits( [ 'update:modelValue' ] ); // 回调注册
    const value = ref(props.modelValue || null);
    const handleChange = (value) => {
        emit('update:modelValue', value)
    };
</script>
<style scoped lang="scss">
    :deep(.el-input-number .el-input__inner){
        text-align: left;
    }
    :deep(.el-input-number.is-without-controls .el-input__wrapper){
        padding-right: 30px;
    }
    .data_number_input_contianer{
        width: 100%;
        position: relative;
        .data_number_input{
            width: 100%;
        }
        .number_input_icon{
            position: absolute;
            right: 10px;
        }
    }
</style>